<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>

<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户中心首页-柚子校园</title>
<link href="Public/plugins/hplus/css/bootstrap.min.css"
	rel="stylesheet">
<link href="Public/plugins/hplus/css/font-awesome.min.css?v=4.4.0"
	rel="stylesheet">
<link href="Public/plugins/hplus/css/animate.css" rel="stylesheet">
<link href="Public/plugins/hplus/css/style.css?v=4.1.0" rel="stylesheet">
<link href="Public/public/pace-theme-flash.css" rel="stylesheet">
<link href="Public/home/css/public/common.css" rel="stylesheet">
<link rel="stylesheet" href="Public/home/css/user/info.css"
	type="text/css" />
<link rel="stylesheet" href="Public/home/css/user/infohead.css">
<link rel="stylesheet" type="text/css"
	href="Public/plugins/cropper/cropper.min.css">
<link type="text/css" href="Public/Fonts/iconfont.css" rel="stylesheet" />

<style type="text/css">
@font-face {
	font-family: "iconfont";
	src: url('iconfont.eot'); /* IE9*/
	src: url('iconfont.eot#iefix') format('embedded-opentype'),
		/* IE6-IE8 */
          url('iconfont.woff') format('woff'), /* chrome, firefox */
          url('iconfont.ttf') format('truetype'),
		/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: 0.2px;
	-moz-osx-font-smoothing: grayscale;
}
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript">
	function getQueryVariable(variable) {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}
	function clk(x) {
		if (x.innerHTML == '保存') {
			x.innerHTML = '编辑';
			var qianming = document.getElementById('qianming').value;
			var phone = document.getElementById('phone').value;
			var email = document.getElementById('email').value;
			alert("修改成功");
			var _url = "${pageContext.request.contextPath }/Users?type=upt&id="
					+ getQueryVariable("id");
			$.getJSON(_url, {
				introduce : qianming,
				phone : phone,
				email : email
			}, function(data) {
				var str = "";
				str += "<ul class='infos'>" + "<li>签名</li>"
						+ "<li class='right_info'>" + data["users"].introduce
						+ "</li>" + "</ul>" + " <ul class='infos'>"
						+ "<li>电话</li>" + "<li class='right_info'>"
						+ data["users"].phone + "</li>" + "</ul>"
						+ " <ul class='infos'>" + "<li>邮箱</li>"
						+ "<li class='right_info'>" + data["users"].email
						+ "</li>" + "</ul>";
				document.getElementById("userinfo").innerHTML = str;
			})

		} else {
			x.innerHTML = '保存';
			var _url = "${pageContext.request.contextPath }/Users?type=sel&id="
					+ getQueryVariable("id");
			$
					.getJSON(
							_url,
							function(data) {
								var str = "";
								str += "<ul class='infos'>"
										+ "<li>签名</li>"
										+ "<li class='right_info'>"
										+ '<input style="display:inline-block" id="qianming" value="'+data["users"].introduce+'"/>'
										+ "</li>"
										+ "</ul>"
										+ " <ul class='infos'>"
										+ "<li>电话</li>"
										+ "<li class='right_info'>"
										+ '<input  style="display:inline-block" id="phone" value="'+data["users"].phone+'"/>'
										+ "</li>"
										+ "</ul>"
										+ " <ul class='infos'>"
										+ "<li>邮箱</li>"
										+ "<li class='right_info'>"
										+ '<input  style="display:inline-block" id="email" value="'+data["users"].email+'"/>'
										+ "</li>" + "</ul>";
								document.getElementById("userinfo").innerHTML = str;
							})
		}
	}
</script>

	<link href="sitelogo/sitelogo.css" rel="stylesheet">
	<script src="sitelogo/sitelogo.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body>

	<s:include value="nav.jsp"></s:include>

	<div class="item-box">
		<s:include value="menu.jsp"></s:include>
	</div>
	<div class="sidebar">
		<div class="btn block">
			<div class="ershou">
				<a href="/release/sale">发布二手</a>
			</div>
			<div class="qiugou">
				<a href="/release/buy">发布求购</a>
			</div>
		</div>
	</div>

	<div class="main center"
		style="padding-left: 180px; padding-right: 160px; padding-top: 105px; width: 100%;">
		<div class="top clearfix">
			<div id="user_photo" class="pull-left" style="padding:0;">
					<div id="crop-avatar" >
						<div class="avatar-view" title="修改头像">
							
						<img id="origin_ph" onclick="updateimg()" 
					src="<s:property value="#session.users.images"/>" style="z-index:1" alt="头像"/>
					 <img id="change_ph" data-toggle="modal" data-target="#myModal"
						src="images/mkhead_hover.png" alt="头像"
						style="display: none;z-index:2"/>
							</div>
						</div>
					</div>

<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<form action="Updimg?id=<s:property value="#session.users.id"/>"  method="post" enctype="multipart/form-data">
				<div class="modal-header">
					<button class="close" data-dismiss="modal" type="button">&times;</button>
					<h4 class="modal-title" id="avatar-modal-label">修改头像</h4>
				</div>
				<div class="modal-body">
					<div class="avatar-body">
						<div class="avatar-upload">
							<input class="avatar-src" name="avatar_src" type="hidden">
							<input class="avatar-data" name="avatar_data" type="hidden">
							<label for="avatarInput">图片上传</label>
							<input  id="myFile" name="myFile" type="file"></div>
						<div class="row">
							<div class="col-md-6">
								<div class="avatar-wrapper" style="height:100%;"></div>
							</div>
							
						</div>
						<div class="row avatar-btns">
							<div class="col-md-3">
								<button class="btn btn-success btn-block" type="submit">保存修改</button>
							</div>
						</div>
					</div>
				</div>
  		</form>
  	</div>
  </div>
</div>
			<div id="user_msg">
				<div class="name">
					<s:property value="#session.users.name" />
				</div>
				<p class="has_sell">
					共有<span class="all">0</span>件商品，已卖出<span>0</span>件商品
				</p>
				<ul class="seller_attr">
					<li>学校：&nbsp;&nbsp;<span><s:property
								value="#session.users.school.name" /></span></li>
					<li>签名：&nbsp;&nbsp;<span class="user_qianming"><s:property
								value="#session.users.introduce" /></span></li>
				</ul>
			</div>
		</div>
		
		<div class="container-fluid">
			<ul id="middle_nav" class="clearfix row">
				<li class="item-info col-lg-2 current"><a
					href="UsersInfo?id=<s:property value="#session.user.id"/>">个人资料</a></li>
				<li class="item-goods col-lg-2 "><a href="Mygoods?uid=<s:property value="#session.users.id"/>&type=sel">我发布的商品</a></li>
				<li class="item-buy col-lg-2 "><a href="Mypurchase?uid=<s:property value="#session.users.id"/>&type=sel">我发布的求购</a></li>
				<li class="item-favor col-lg-2 "><a href="Mycollect?uid=<s:property value="#session.users.id"/>&type=sel">我的收藏</a></li>
				<li class="item-favor col-lg-2 "><a href="/message">我的关注</a></li>
				<li class="item-message col-lg-2 "><a href="/message">消息中心</a></li>
			</ul>
		</div>
		<div id="my_info">
			<div id="account_info">
				<h2>账户信息</h2>
				<ul class="infos">
					<li>账号</li>
					<li class="right_info"><span><s:property
								value="#session.users.name" /></span></li>
				</ul>
			</div>
			<div id="base_info">
				<h2>
					基本信息 <span id="edit_info" onclick="clk(this)">编辑</span>
				</h2>
				<div id="userinfo">
					<ul class="infos">
						<li>签名</li>
						<li class="right_info"><span id="qianming_span"><s:property
									value="#session.users.introduce" /></span></li>
					</ul>
					<ul class="infos">
						<li>手机</li>
						<li class="right_info"><span id="phone_span"><s:property
									value="#session.users.phone" /></span></li>
					</ul>
					<ul class="infos">
						<li>email</li>
						<li class="right_info"><span id="qq_span"><s:property
									value="#session.users.email" /></span></li>
					</ul>
				</div>
			</div>
		</div>

	</div>
	<s:include value="footer.jsp"></s:include>
	<script>
	 $("#user_photo").mouseenter(function(){
		  $("#change_ph").css("display","block");
		});
	 $("#user_photo").mouseleave(function(){
		  $("#change_ph").css("display","none");
		});
	</script>
</body>
</html>